<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../static/mui/css/mui.min.css" rel="stylesheet"/>
    <style>
    	.mui-bar-nav~.mui-content {
			padding-top: 23px;
		}
		.logName.mui-table-view-cell:after{
			background-color: #FFFFFF;
		}
		.todayorder.mui-table-view-cell:after{
		 	background-color: #FFFFFF;
		}
		.companyTitle{
		 	padding-top:19%;
		 	padding-left: 5%; 
		 	padding-right: 10%;
		}
		.logName{
		 	display:inline-block;
		 	/*width:120px;*/
		 	width: 65%;
		}
		.logName div{
		 	line-height: 60px;
		}
		@media only screen and  (max-width: 320px) {
			.companyTitle{
				position: relative;
			 	padding-top:19%;
			 	padding-left: 5%; 
			 	padding-right: 5%;
			}
			.mui-table-view-chevron .mui-table-view-cell {
			    padding-right: 0px;
			}
		}
		.openState{
		 	margin-top: 1%;
		}
		.openState span{
		 	display: block;
		 	position: absolute;
		 	top: 43px;
		 	left: 15px;
		}
		.orderCount{
			padding-top:10px; 
			padding-bottom: 10px;
			margin-bottom: 12px;
		}
		.todayOrder{
			display:inline-block; 
			border-right:1px solid #ddd;
			width: 46%;
			/*height: 35px;*/
			margin-top: 3px;
		}
		.todayOrder span:nth-child(1){
			margin-right:8px;
			line-height: 10px; 
			font-size: small;
			
		}
		.todayOrder span:nth-child(2){
			font-size:large;
			font-weight: bold;
		}
		.sales{
			display:inline-block;
			width: 46%;
			/*height: 35px;*/
		}
		.sales span:nth-child(1){
			line-height: 10px; 
			margin-right:8px;
			font-size: small;
			}
		.sales span:nth-child(2){
			font-size:large;
			font-weight: bold;
		}
		.peoManager:after{
		 	margin-top:12px;
		}
		.peoManager span{
		 	 font-size: small; 
		 	 height: 50px; 
		 	 line-height: 35px;
		}
		.companyinfo>li{
		 	height: 50px;
		}
		.title{
		 	height: 50px; 
		 	line-height: 50px; 
		 	margin-left: 5%; 
		 	font-weight: bold; 
		 	font-size: large;
		}
		.companyinfo>li img{
		 	float: left;
		 	height: 30px;
		 	margin-right: 24px;
		}
		.companyinfo>li span{
		 	font-size: small;
		 	color: #AF9494;
		}
		.companyinfo>li .left{
		 	height:65px; 
		 	line-height: 41px;
		 	color: black;
		 	margin-right: 25px;
		}
		.mui-navigate-right:after{
		    top: 25%;
		}
		.mui-switch.mui-active:before {
		    right: auto;
		    left: 15px;
		    content: '营业';
		    color: #fff;
		}
		.mui-switch:before {
		    font-size: 13px;
		    position: absolute;
		    top: 3px;
		    right: 11px;
		    content: '休息';
		    text-transform: uppercase;
		    color: #999;
		}
		.mui-table-view-cell.mui-active{
			 background-color: #FFFFFF;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav" style="background-color:#dd524d ;">
		    <h1 class="mui-title" style=" color: #fff;">我的</h1>
	</header>
	<!--公司title-->
	<ul class="mui-table-view mui-table-view-chevron companyTitle">
		<li class="mui-table-view-cell mui-media logName">
			<img class="mui-media-object mui-pull-left" src="../../static/app/img/home_ico1.png"/>
			<div class="mui-media-body" id="shopNameLabel" >jiujiujiazheng </div>
		</li>
		<li class="mui-switch mui-switch-blue mui-active mui-pull-right openState" id="shopStateSwitch">
			<div class="mui-switch-handle"></div>
			<span id="shopStateLabel"></span>
		</li>
	</ul>
	<div class="mui-content" >
		<!--公司接单数量 营业额-->
	   <ul class="mui-table-view " class="orderCount" style="margin-bottom: 12px;margin-top:0px; font-size:12px;" >
			<li class="mui-table-view-cell mui-pull-center mui-col-sm-6 todayorder mui-text-center todayOrder">
				<span>今日接单 </span>
				<span id="todayOrderCountLabel" style="color: #DD524D;">10</span>
			</li>
			<li class="mui-table-view-cell mui-text-center mui-col-sm-6 mui-text-center sales">
				<span>营业额</span>
				<span id="todayOrderAmountLabel" style="color: #DD524D;">10</span>
			</li>
		</ul>
		<!--公司人员管理
		<ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell mui-media " style="height: 50px;">
				<a class="mui-navigate-right peoManager" href="peopleList.html">
					<img style="height: 30px;" class="mui-media-object mui-pull-left" src="../../static/app/img/menu_bot04.png">
					<span style="">公司人员管理</span>
					<span class="mui-pull-right">0人</span>
				</a>
			</li>
			<li class="mui-table-view-cell mui-media" style="height: 50px;">
				<a class="mui-navigate-right peoManager">
					<img style="height: 30px;" class="mui-media-object mui-pull-left mui-icon-person" src="../../static/app/img/menu_bot04.png">
					<span style="">客户评价</span>
					<span class="mui-pull-right">0条</span>
				</a>
			</li>
		</ul>-->
		<!--基本信息-->
		<div class="title">基本信息</div>
		<ul class="mui-table-view companyinfo">
			<li class="mui-table-view-cell mui-media">
				<img src="../../static/app/img/menu_bot04_time.png">
				<span class="left">营业时间</span>
				<span id="workTimeLabel" style="color:#AEAEAE;">是担任公司的</span>
			</li>
			<li class="mui-table-view-cell mui-media">
				<img src="../../static/app/img/menu_bot04_adress.png">
				<span class="left">所在地址</span>
				<span id="addressLabel" style="color:#AEAEAE;"></span>
			</li>
			<li class="mui-table-view-cell mui-media">
				<img  src="../../static/app/img/menu_bot04_phone.png">
				<span class="left">联系电话</span>
				<span id="telLabel" style="color:#AEAEAE;"></span>
			</li>
		</ul>
	</div>
	<script type="text/javascript" src="../../static/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="../../static/lib/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../../static/app/js/kit.js"></script>
	<script type="text/javascript" src="../../static/app/js/api.js"></script>
	<script type="text/javascript" charset="utf-8">
	    mui.plusReady(function(){
	    	//获取缓存中的当前登录商家用户信息
	        var shop = "";
	    	window.addEventListener("getMyIndexData",function(event){
	    		shop = event.detail.shop;
	    		getData();
	    	});
	    	//更新当前页面上相关信息
	    	function getData(){
	    		$("#shopNameLabel").text(shop.NAME);
		    	if(shop.ISWORK==1){
			    	$("#shopStateSwitch").addClass("mui-active");
		    	}else{
		    		$("#shopStateSwitch").removeClass("mui-active");
		    	}
		    	$("#workTimeLabel").text(shop.BEGINTIME + " - " + shop.ENDTIME);
		    	$("#addressLabel").text(shop.ADDRESS);
		    	$("#telLabel").text(shop.TEL);
		    	//请求查询商家的订单数量信息
		    	API.getShopState(shop.ID,function(object){
		    		//今日接单	    		
					$("#todayOrderCountLabel").text(object.ORDERCOUNT);
					//营业额
					$("#todayOrderAmountLabel").text(object.ORDERAMOUNT);
		    	});
	    	}
	    	$(".companyTitle")[0].addEventListener("toggle",function(){
	    			Kit.ui.showLoading();
	    			setTimeout(function(){
		    			var isActive=$("#shopStateSwitch").hasClass("mui-active");//class已经赋值
			    		var state=0;
			    		if(isActive){
			    			state=1;
			    		}
			    		API.changeWork(shop.ID,state);
	    			},1000);
		    		Kit.ui.closeLoading();
	    	});
	    	
	    	/**
	    	 * 注册事件可以在外部调用
	    	 * 接单数量增加
	    	 */
	    	window.addEventListener("myOrderCount",function(event){
	    		 //获得订单数量
				var orderCount = event.detail.orderCount;
	    		//今日接单	    		
				var count = $("#todayOrderCountLabel").text();
				$("#todayOrderCountLabel").text(parseInt(count)+parseInt(orderCount));
				
	    	});
	    	
	    	/**
	    	 * 注册事件可以在外部调用
	    	 * 今日营业额增加
	    	 */
	    	window.addEventListener("myOrderAmount",function(event){
	    		 //获得订单金额
				var orderAmount = event.detail.orderAmount;
				//营业额
				var amount = $("#todayOrderAmountLabel").text();
				$("#todayOrderAmountLabel").text(parseFloat(amount)+parseFloat(orderAmount));
				
	    	});
	    });
	</script>
</body>
</html>